<template>
  <el-card>
    <el-space
      wrap
      alignment="start"
      direction="vertical"
      :size="20"
    >
      <el-button
        type="primary"
        @click="showUserForm(1)"
      >
        新增菜单
      </el-button>
      <div />
    </el-space>
    <el-table
      :data="dataList"
      border
      style="width: 100%"
      row-key="menu_id"
      lazy
      :tree-props="{ children: 'children'}"
    >
      <el-table-column
        prop="menu_id"
        label="菜单id"
        width="120"
        align="center"
      />
      <el-table-column
        prop="menu_name"
        label="菜单名称"
        width="120"
        align="center"
      />
      <el-table-column
        prop="component"
        label="图标"
        width="120"
        align="center"
      >
        <template #default="scope">
          <svg-icon
            style="font-size:20px"
            :icon-class="scope.row.icon"
            color="#666666"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="order_num"
        label="排序"
        width="120"
        align="center"
      />
      <el-table-column
        prop="path"
        label="路径"
        width="120"
        align="center"
      />
      <el-table-column
        prop="component"
        label="组件地址"
        width="120"
        align="center"
      />
      <el-table-column
        prop="component"
        label="状态"
        width="120"
        align="center"
      >
        <template #default="scope">
          <el-tag
            class="ml-2"
            v-if="scope.row.status == 0"
          >
            正常
          </el-tag>
          <el-tag
            class="ml-2"
            v-else
            type="danger"
          >
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ dateFormat(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        width="160"
        align="center"
      >
        <template #default="scope">
          <span>{{ dateFormat(scope.row.update_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="160"
      >
        <template #default="scope">
          <el-button
            text
            type="primary"
            @click="showUserForm(2, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            @click="delUser()"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="showVisible"
      title="菜单编辑"
      width="700px"
      destroy-on-close
    >
      <el-form
        status-icon
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100"
        inline
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              prop="parent_id"
              label="上级菜单"
            >
              <el-tree-select
                style="width:500px"
                ref="treeSelect"
                v-model="form.parent_id"
                :data="treeMenuList"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                :props="{
                  children: 'children', label: 'menu_name',
                }"
                node-key="menu_id"
                :render-after-expand="false"
                @node-click="nodeClick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="menu_type"
              label="菜单类型"
            >
              <el-radio-group v-model="form.menu_type">
                <el-radio label="M">
                  目录
                </el-radio>
                <el-radio label="C">
                  菜单
                </el-radio>
                <el-radio label="F">
                  按钮
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="菜单图标"
            >
              <el-popover
                placement="bottom"
                :width="600"
                trigger="click"
              >
                <template #reference>
                  <el-input
                    v-model="form.icon"
                    style="width:500px"
                    placeholder="点击选择图标"
                    readonly
                  >
                    <template #prefix>
                      <svg-icon
                        v-if="form.icon"
                        :icon-class="form.icon"
                        style="width: 25px;"
                        color="#cccccc"
                      />
                      <svg-icon
                        v-else
                        icon-class="search"
                        color="#cccccc"
                      />
                    </template>
                  </el-input>
                </template>
                <IconSelect
                  ref="iconSelect"
                  @selected="selected"
                  :active-icon="form.icon"
                />
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="menu_name"
              label="菜单名称"
            >
              <el-input
                v-model="form.menu_name"
                placeholder="请输入菜单名称"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="order_num"
              label="显示顺序"
            >
              <el-input-number
                v-model="form.order_num"
                :min="1"
                :max="999"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="路径地址"
            >
              <el-input
                v-model="form.path"
                placeholder="请输入路径地址"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="组件地址"
            >
              <el-input
                v-model="form.component"
                placeholder="请输入组件名称"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="权限标识"
            >
              <el-input
                v-model="form.perms"
                placeholder="请输入权限标识"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="路径参数"
            >
              <el-input
                v-model="form.query"
                placeholder="请输入路径参数"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="是否是外链"
            >
              <el-radio-group v-model="form.is_frame">
                <el-radio :label="0">
                  是
                </el-radio>
                <el-radio :label="1">
                  否
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="显示状态"
            >
              <el-radio-group v-model="form.visible">
                <el-radio :label="0">
                  显示
                </el-radio>
                <el-radio :label="1">
                  隐藏
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="菜单状态"
            >
              <el-radio-group v-model="form.status">
                <el-radio :label="0">
                  正常
                </el-radio>
                <el-radio :label="1">
                  停用
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="saveUser()"
          >
            {{ actionType == 1 ? '添加' : '更新' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted, nextTick } from 'vue'
import { getMenuList, getMenutreeList, addMenu, updateMenu } from '@/api/menu'
import IconSelect from '@/components/icon-select/index.vue'
import { dateFormat } from '@/utils/filters'
const { proxy } = getCurrentInstance() as any
const formRef = ref()
const dataList = ref<any[]>([])
const showVisible = ref<boolean>(false)
const actionType = ref<number>(1) // 超炒操作类型 1 添加 2 修改
const treeMenuList = ref<any[]>([])
const treeSelect = ref()
const form = reactive<any>({
  parent_id: 0,
  menu_type: 'M',
  icon: '', // 图标
  menu_name: '', // 菜单名称
  order_num: 1, // 显示顺序
  is_frame: 1, // 是否为外链 0 是 1 不是
  path: '', // 路径地址
  component: '',
  perms: '', // 权限标识
  query: '', // 路由参数
  visible: 0,
  status: 0
})

const formRules = reactive({
  parent_id: [
    { required: true, message: '请选择父级菜单', trigger: 'change' }
  ],
  menu_type: [
    { required: true, message: '请选择菜单类型', trigger: 'change' }
  ],
  menu_name: [
    { required: true, message: '请填写菜单名称', trigger: 'blur' }
  ],
  path: [
    { required: true, message: '请填写路径', trigger: 'blur' }
  ]
})
// 获取菜单列表
const getList = (): void => {
  getMenuList().then((res: any) => {
    dataList.value = res
  })
}
// 显示编辑框
const showUserForm = (type: number, menu?: any): void => {
  getTreeList()
  actionType.value = type
  // 修改回显
  if (type === 2) {
    Object.keys(menu).forEach((key: string) => {
      form[key] = menu[key]
    })
  }
  showVisible.value = true
  void nextTick(() => {
    formRef.value.resetFields()
  })
}
// 图标选择回调
function selected (name: string): void {
  form.icon = name
}
// 点击树形菜单节点
function nodeClick (e: any): void {
  form.parent_id = e.menu_id
  treeSelect.value.blur()
}
// 获取树形菜单下拉列表
function getTreeList (): void {
  getMenutreeList().then((res: any) => {
    treeMenuList.value = res
  })
}
// 保存菜单
const saveUser = async (): Promise<any> => {
  await formRef.value.validate((val: boolean) => {
    if (val) {
      if (actionType.value === 1) {
        addMenu(form).then((res: any) => {
          console.log('添加成功', res)
          showVisible.value = false
          getList()
          proxy.$message.success('添加成功')
        })
      } else {
        const obj = { ...form }
        delete obj.update_time
        delete obj.create_time
        delete obj.menu_id
        delete obj.children
        updateMenu(form.menu_id, obj).then(() => {
          getList()
          showVisible.value = false
        })
      }
    } else {
      return false
    }
  })
}
// 删除用户
const delUser = (): void => {
  // removeUser(userId).then((res: any) => {
  //   console.log('------' + res)
  //   getList()
  // })
}
onMounted(async () => {
  getList()
})
</script>
<style scoped lang="scss">

</style>
